<template>
	<view class="page_wrapper">
		<view class="calc_list_block">
			<view class="calc" v-for="(calc, index) in calcList" :key="index">
				{{calc.firstNum}} {{calc.calcType}} {{calc.secondNum}} = 
				<view :class="{'error': calc.resultFlag === 'error'}">{{calc.myResult}}</view>
				
			</view>
		</view>
		<view class="btns_block">
			<button class="fcz_btn share_exam" open-type="share">邀请答题</button>
		</view>
	</view>
</template>

<script>
	import {request} from '@/utils/request.js'
	export default {
		data() {
			return {
				examId: 0,
				mathExam: {},
				calcList: []
			}
		},
		onLoad(option) {
			this.examId = option.examId
			this.fetchData()
		},
		methods: {
			fetchData() {
				uni.showLoading()
				request.get( 
					'/mathExams/id,' + this.examId, {}
				).then(res => {
					uni.hideLoading()
					console.log(res)
					this.mathExam = res
					this.calcList = res.calcLogList
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			}
		},
		
		onShareAppMessage(res) {
			if (res.from === 'button') {
					 // 来自页面内分享按钮
					 console.log(res.target);
					 return {
					 	title: '我口算只用了' + this.mathExam.useTimeTxt + ',成绩是:' + this.mathExam.score + '分，你也来试试吧' ,
					 	path: '/pages/shareExam/shareExam?examId=' + this.examId,
					 	mpId: 'wxe9f0922a16331d4b', //此处配置微信小程序的AppId
					 	imageUrl: 'https://fcz.oss-cn-beijing.aliyuncs.com/f/fbkzvdomazmqarrq.png'
					 }
			}
			return {
				title: '萌芽学口算：学习好帮手',
				path: '/pages/index/index',
				mpId: 'wxe9f0922a16331d4b', //此处配置微信小程序的AppId
				imageUrl: 'https://fcz.oss-cn-beijing.aliyuncs.com/f/fbkzvdomazmqarrq.png'
			}
		},
		onShareTimeline(res) {
			return {
				title: '萌芽学口算：学习好帮手',
				path: '/pages/index/index',
				mpId: 'wxe9f0922a16331d4b', //此处配置微信小程序的AppId
				imageUrl: 'https://fcz.oss-cn-beijing.aliyuncs.com/f/fbkzvdomazmqarrq.png'
			}
		}
	}
</script>

<style lang="scss">
.page_wrapper{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	.calc_list_block{
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		overflow: scroll;
		.calc{
			width: 25%;
			height: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.error{
			color: red;
		}
	}
	.btns_block{
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0px 20px;
		.fcz_btn{
			height: 40px;
			color: white;
			background-color: #67C23A;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
		}
		.share_exam{
			font-size: 14px;
			flex: 1;
		}
	}
}
</style>
